import React, { Component } from 'react';
import { Popover } from 'antd-mobile';
import 'common/containers/customTop.less';

/**
 * 头部标题组件
 */
class CustomTop extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	visible: false
	    }
	}
	
	//左上角返回事件
	backHandle = () => {
		window.history.back();
	}
	
	//右上角点击事件
	onSelect = (item) => {
		this.setState({
	      visible: false
	    });
		this.props.toolHandle(item.key);
	}
	
	//popover显示隐藏
	handleVisibleChange = (visible) => {
	    this.setState({
	      visible,
	    });
  	}
	
	render(){
		return(
			<div className="custom_title">
				<div className="custom_title_left fl">
					<img src="assets/img/back.png" onClick={this.backHandle}/>
				</div>
				<div className="custom_title_right fr">
					<Popover mask
			            overlayClassName="fortest"
			            overlayStyle={{ color: 'currentColor' }}
			            visible={this.state.visible}
			            onSelect={this.onSelect}
			            overlay={this.props.tools}
			            align={{ overflow: { adjustY: 0, adjustX: 0 }, offset: [-10, 2],}}
			            onVisibleChange={this.handleVisibleChange}>
						<img src={this.props.toolImg}/>
					</Popover>
				</div>
				<div className="custom_title_content">{this.props.title}</div>  
			</div>
		)
	}
}

export default CustomTop;